import React, { Component } from "react";

 class StateDemo extends Component {
  constructor(props) {
    super(props);
    // 类组件的状态（响应式数据）要求：
    // 1、定义数据必须放在state属性里
    // 2、修改数据时，必须使用setState函数。
    this.state = {
      count: 3,
      person:{
        name:"杨壮",
        age:18
      }
    };
    console.log("StateDeom:this.props",this.props);
  }

  changeCount = () => {
    // 1、修改数据时，必须使用setState函数。
    // react类组件的响应式：通过调用setState函数，setState函数内部在调用render函数。完成了响应式。
    // this.setState({
    //   count:this.state.count+1
    // })

    // 2、setState()函数内部修改数据是异步的。
    // console.log("this.state.count",this.state.count);//3
    // 1）、如果希望拿到修改后的状态

    // this.setState({
    //   count:this.state.count+1
    // },()=>{
    //   console.log("this.state.count",this.state.count);//4
    // })

    // 2)、如果希望拿到修改状态前做点事情。

    // console.log("this.state.count",this.state.count);

    // this.setState((prevState)=>{
    //   console.log("prevState.count",prevState.count);//3
    //   console.log("this.state.count",this.state.count);//3
    //   return {
    //     count: this.state.count + 1,
    //   }
    // })



  };

  addAge = () => {
    this.setState({
      person:{
        ...this.state.person,
        age:this.state.person.age+1
      }
    })
  }


  goReactRedux=()=>{
     this.props.history.push("/Admin/ReactReduxDemo");    
  }

  render() {
    console.log("render");
    return (
      <div>
        <h1>类组件的响应式（State）：状态机</h1>
        <p>数量：{this.state.count}</p>
        <input type="button" value="修改count" onClick={this.changeCount} />
        <hr/>
        <p>姓名：{this.state.person.name}</p>
        <p>年龄：{this.state.person.age}</p>
        <input type="button" value="长大" onClick={this.addAge} />
        <input type="button" value="去react-redux页面" onClick={this.goReactRedux} />
      </div>
    );
  }
}

export default StateDemo

